<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    body {
      background: #ccc;
    }

    div {
      font-size: 80px;
      color: #ccc;
    }

    .tu {
      text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
    }

    .ao {
      text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
    }

    .fire {
      /* text-align: center; */
      font: bold 60px 微软雅黑;
      color: #F00;
      padding: 30px;
      text-shadow: 0 0 4px #FFF, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 10px #f80, 2px -25px 20px #f20;
    }
  </style>

  <body>

    <div class="tu">凸起的文字</div>
    <div class="ao">凹下去的文字</div>
    <div class="fire">火焰文字</div>
  </body>

</body>

</html>